<template>
	<view :style="objColor">
		<navLod txtColor="#FFFFFF" bgColor="#16181A"
			image="https://oos-cn.ctyunapi.cn/front-end/static/static/back1.png" :title="isv2g ? '放电中' : '充电中'"
			:show_bol="false" />
			<view class="powerCon"
				:style="powerConStyle">
				<view class="infoTopCon">
					<view class="infoSite">
						{{ chargeInfo.stationName ? chargeInfo.stationName : '--' }}
						<image class="infoImg" src="https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/why.png"
							mode="aspectFit" />
					</view>
					<view class="infoGun" v-if="chargeInfo.terminalType != 2">
						{{ chargeInfo.gunName ? chargeInfo.gunName : '--' }}
					</view>
				</view>

				<!-- 动图 -->
				<view class="loading-warp" style="width: 100%; height: 400rpx">
					<l-svga ref="myCanvas" class="SVGACon" />
					<view v-if="chargeInfo.terminalType != 2" class="sosCon">
						{{ chargeInfo.soc ? chargeInfo.soc : 0 }}
						<text class="sosScale">%</text>
					</view>
				</view>

				<view class="infoPlate" v-if="chargeInfo.terminalType != 2">
					{{ chargeInfo.plateno ? chargeInfo.plateno : '--' }}
				</view>
				<view class="infoEstimate" v-if="chargeInfo.terminalType != 2">
					<text class="infoEstimateText">{{isv2g ? '预计放电剩余时间' : '预计充电剩余时间'}}</text>
					{{
					!chargeInfo.remainingtime || chargeInfo.remainingtime == 0
						? '计算中'
						: chargeInfo.remainingtime > 60
						? '>60min'
						: chargeInfo.remainingtime + 'min'
				}}
				</view>

				<!-- 831价格展示 -->
				<view class="price_view_box" v-if="chargeInfo.terminalType != 2">
					<view class="img_view">
						<image src="https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/tip2.png"
							@tap="pricePopupVisible(true)" />
					</view>
					<view class="price_view">
						<!-- 先判断 是否有专享价 -->
						<view class="total_view yyy" v-if="currentPriceNow.exclusiveDiscount">
							<!-- 只有专享价 -->
							<view class="zxj_view zxj">
								<view class="img_view_831_bg">
									<image class="v_icon"
										src="https://oos-cn.ctyunapi.cn/front-end/static/mobileImg/bgTag/zxj_bg.png"
										mode="scaleToFill" />
									<view class="v_text">
										<text>¥{{ currentPriceNow.exclusivePriceStr }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="total_view www" v-else>
							<view class="zxj_view zdyh_dkh">
								<view class="current_view">
									<text class="v_text_current">
										当前电价：¥
										<text class="current_t">
											{{
											(currentPriceNow.discount ? currentPriceNow.currentPriceStr : currentPriceNow.sweepPriceStr) || 0
										}}
										</text>
									</text>
								</view>
								<!-- 划线价展示：站点优惠 || 成长会员折扣 || 大客户价 -->
								<!-- 23.11.22 付费会员不显示划线价 -->
								<view class="hxj_view"
									v-if="currentPriceNow.discount || currentPriceNow.growthleDiscount || currentPriceNow.contractDiscount">
									<text class="v_text">¥{{ currentPriceNow.sweepPriceStr }}</text>
								</view>
								<!-- 大客户价展示条件 -->
								<view class="img_view_831_bg" v-if="currentPriceNow.contractDiscount">
									<image class="v_icon"
										src="https://oos-cn.ctyunapi.cn/front-end/static/mobileImg/bgTag/dkh_bg.png"
										mode="scaleToFill" />
									<view class="v_text">
										<text>¥{{ currentPriceNow.contractPriceStr }}</text>
									</view>
								</view>
								<!-- 成长会员价展示 -->
								<view class="img_view_831_bg" v-if="currentPriceNow.growthleDiscount">
									<image class="v_icon"
										src="https://oos-cn.ctyunapi.cn/front-end/static/mobileImg/bgTag/icon-huiyuan.png"
										mode="scaleToFill" />
									<view class="v_text">
										<text>¥{{ currentPriceNow.growthlePriceStr }}</text>
									</view>
								</view>
								<!-- 付费会员价展示 -->
								<view class="img_view_831_bg" v-if="currentPriceNow.payleDiscount">
									<image class="v_icon"
										src="https://oos-cn.ctyunapi.cn/front-end/static/mobileImg/bgTag/icon-vip.png"
										mode="scaleToFill" />
									<view class="v_text">
										<text>¥{{ currentPriceNow.paylePriceStr }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="electricityPriceCon">
					<view class="infoCon">
						<view class="infoLi">
							<view class="infoVal">0</view>
							<view class="infoTitle">{{isv2g ? '放电时长(min)' : '充电时长(min)'}}</view>
						</view>
						<view class="infoLi">
							<view class="infoVal">0</view>
							<view class="infoTitle">{{isv2g ? '已放电量(度)' : '已充电量(度)'}}</view>
						</view>
						<view class="infoLi">
							<view class="infoVal">0</view>
							<view class="infoTitle">预估费用(元)</view>
						</view>
					</view>
					<view class="infoCon">
						<view class="infoLi">
							<view class="infoVal">0</view>
							<view class="infoTitle">电流(A)</view>
						</view>
						<view class="infoLi">
							<view class="infoVal">0</view>
							<view class="infoTitle">电压(V)</view>
						</view>
						<view class="infoLi">
							<view class="infoVal">0</view>
							<view class="infoTitle">功率(KW)</view>
						</view>
					</view>
				</view>

				<view class="line_view" />

				<view class="electricityPriceCon" v-if="chartData.tempList">
					<view class="echartTitleCon">
						<view>
							<view class="mark1" />
							<view class="title">电流</view>
							<view class="mark2" />
							<view class="title">功率</view>
						</view>

						<view>0(A)/0(KW)</view>
					</view>
					<view class="columnCanvas">
					</view>
				</view>
				<view class="infoContainer">
					<!-- 停车费 -->
					<view class="parkingRate" @tap="clickParkingRate">
						<text class="parkingRateText">停车费说明</text>
					</view>

					<!-- 轮播 -->
					<!-- <view v-if="info.length" data-skeleton-hide="hideActiv" class="active">
					<swiper
						class="activ-in"
						:indicator-dots="indicatorDots"
						:autoplay="autoplay"
						:vertical="vertical"
						:interval="interval"
						:duration="duration"
						indicator-color="rgba(255, 255, 255, 0.4)"
						indicator-active-color="#fff"
					>
						<swiper-item
							v-for="(item, index) in info"
							:key="index"
							@tap="advertisingLink"
							:data-title="item.title"
							:data-status="item.status"
							:data-time="item.timeS"
							:data-link="item.advertisingLink"
							:data-type="item.connectionType"
							:data-path="item.mobilePath"
							:data-details="item.details"
							:data-id="item.id"
							:data-mid="item.marketingId"
							:data-atype="item.activityType"
						>
							<image :src="item.image" class="swiperitem" />
						</swiper-item>
					</swiper>
				</view> -->
				</view>

				<!-- 停止充电按钮 -->
				<view class="stopcharge">
					<button type="primary" @tap="clickStop">{{isv2g ? '停止放电' : '停止充电'}}</button>

					<!-- 手动停止充电验证码 -->
					<view class="identCode" v-if="chargeInfo.identCode">
						<text class="identCodeTitle">{{isv2g ? '手动停止放电验证码：' : '手动停止充电验证码：'}}</text>
						<text class="val">{{ chargeInfo.identCode ? chargeInfo.identCode : '--' }}</text>
					</view>
				</view>
			</view>
			<!-- 停车费弹出框 -->
			<view class="parkingCon" v-if="isParkingRate">
				<view class="parking">
					<view class="parkingImg">
						<text class="parkingTitle">停车费说明</text>
						<image class="img" src="https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/delete2.png"
							@tap="clickParkingRate" />
					</view>
					<text class="parkingNotice">
						{{ chargeInfo.parkingFeeDesc ? chargeInfo.parkingFeeDesc : '暂无' }}
					</text>
				</view>
			</view>

			<!-- 充电详情 -->
			<view class="parkingCon" v-if="isParkingRate2">
				<view class="parking">
					<view class="parkingImg">
						<text class="parkingTitle">{{isv2g ? '放电详情' : '充电详情'}}</text>
						<image class="img"
							src="https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/delete2.png" />
					</view>

					<view class="DesCon">
						<view class="parkingDesCon2">
							<view class="Title">{{isv2g ? '放电单号：' : '充电单号：'}}</view>
							<view class="parkingVal">{{ chargeInfo.busId }}</view>
						</view>
						<view class="parkingDesCon2">
							<view class="Title">开始时间：</view>
							<view class="parkingVal2">{{ chargeInfo.timeS }}</view>
						</view>
					</view>
				</view>
			</view>
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="info" cancelText="返回首页" :confirmText="isv2g ? '结束放电' : '结束充电'" title="温馨提示"
					:content="isv2g ? '平台检测到当前放电车辆的放电数据长时间未更新，您可选择结束当前订单重新启动。如放电正常可忽略，放电数据稍后会同步，可留意账单记录' : '平台检测到当前充电车辆的充电数据长时间未更新，您可选择结束当前订单重新启动。如充电正常可忽略，充电数据稍后会同步，可留意账单记录'"
					@confirm="dialogConfirm" @close="dialogClose" />
			</uni-popup>

			<u-popup round="25" :show="showPrice" mode="bottom" position="bottom" @close="closePricePopupVisible"
				data-type="close" custom-class="price_popup">
				<view class="box-info">
					<view class="title">电价收费详情</view>
					<view class="t1">
						<text>收费时段</text>
						<text>费用(元/度) = 电费 + 服务费</text>
					</view>

					<!-- 831价格收费详情抽离组件 -->
					<priceDetailView :itemData="gunDetail.powerStageDetail" />
				</view>
			</u-popup>

			<uni-popup ref="showBulletFrame" safe-area type="center" :mask-click="false">
				<view class="BulletFrameCon">
					<view class="bulletTitle">
						启动失败
						<image class="img" src="https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/delete2.png"
							@tap="again" />
					</view>
					<view class="bulletVal">
						<view v-if="isv2g">放电启动失败，请重新启动放电！</view>
						<view v-else>充电启动失败，请重新启动充电！</view>
						<view>({{ failureReason }})</view>
					</view>
					<view class="bulletButton" @tap="again">重新启动</view>
				</view>
			</uni-popup>
		</view>
</template>

<script>
	'use strict';
	import {
		cancelOrder
	} from '@/api/zhifufen';
	import {
		stopAndCloseCharge
	} from '@/api/orderMsgApi';
	var https_1 = require('./../../../api/https.js');

	import navLod from '@/components/navLod/navLod';
	import homeNav from '@/components/homeNav/homeNav';

	var newapp = getApp();
	var videoItem2 = '';
	var videoItem3 = '';
	var waitingTimes = '';
	var getnum = 0;
	var st = null;
	var times = '';
	export default {
		components: {
			navLod,
			homeNav
		},
		data() {
			return {
				stationId: '',
				waitingTime: 180,
				waitingDisplay: true,
				animation: 0,
				parameter: {},
				busId: '',
				gunNo: '',
				pileNo: '',
				player: {},
				parser: {},
				failureReason: '启动超时', // 失败原因
				isChkChargeLoading: false, // 检测是否在执行 chkCharge 函数
				info: [
					'https://oos-cn.ctyunapi.cn/front-end/static/static/advertisement.png',
					'https://oos-cn.ctyunapi.cn/front-end/static/static/banner2.png',
					'https://oos-cn.ctyunapi.cn/front-end/static/static/advertisement.png'
				],
				widnowH: uni.getSystemInfoSync().screenHeight,
				bar_Height: uni.getSystemInfoSync().statusBarHeight,
				isParkingRate: false,
				chargeInfo: {},

				isParkingRate2: '',
				showPrice: false,
				chartData: {
					tempList: ''
				},
				currentPriceNow: {
					exclusiveDiscount: ''
				},
				gunDetail: {},
				isv2g: false, // 是否是v2g充电 #V2G功能
				carNum: '', // 车牌号-#V2G功能
				powerConStyle: '',
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.setPageStyle()
			console.log(options, 9);
			this.stationId = options.stationId;
			this.$set(this.chargeInfo, 'stationName', options.stationName);
			console.log(this.chargeInfo, 6);
			this.batteryCheckBalance = options.batteryCheckBalance
			uni.showLoading({
				title: '加载中'
			});

			if (options.parameter) {
				let parameter = decodeURIComponent(options.parameter);
				parameter = JSON.parse(parameter);
				parameter = JSON.parse(options.parameter);
				parameter.qrCode = decodeURIComponent(parameter.qrCode);

				//#ifdef H5
				if (this.isCYCAPPInH5()) {
					// 川逸充推送订单
					if (uni.getStorageSync('thirdCode')) {
						parameter.startChargeSeq = uni.getStorageSync('thirdCode') || null
					} else {
						alert('请返回App扫码再启动')
						return
					}
				}
				//#endif
				this.setData({
					parameter
				});
			}

			// 判断是否是v2g充电 - #V2G功能
			if (options.isv2g && this.isV2GOption) {
				this.isv2g = true
				this.pileNo = options.pileNo || ''
				this.gunNo = options.gunNo || ''
				this.carNum = options.carNum || ''
			}

			this.$nextTick(() => {
				setTimeout(() => {
					this.getMove();
					this.goCharge();
					// #V2G功能
					if (this.isV2GOption && this.isv2g) {
						this._v2gStartDisCharge() // 放电-#V2G功能
					} else {
						if (this.doubleGunSwitch && this.parameter.gunNo1) {
							this.authentication1() // 双枪并充
						} else {
							this.authentication()
						}
					}
				}, 200);
			});
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {
			console.log('监听页面隐藏-----')
			clearInterval(waitingTimes);
			clearInterval(times);
		},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {
			console.log('监听页面卸载------')
			clearInterval(waitingTimes);
			clearInterval(times);
		},

		methods: {
			setPageStyle() {
				// #ifndef MP-ALIPAY
				this.powerConStyle = 'padding-top:' + (this.widnowH <= 568 ? this.bar_Height + 40 : this.bar_Height + 45) + 'px;'
				// #endif
				// #ifdef MP-ALIPAY
				this.powerConStyle = ''
				// #endif
			},

			moveHandle: function() {
				return false;
			},

			// 判断是否是v2g充电 - #V2G功能
			_v2gStartDisCharge() {
				var that = this;
				https_1.v2gStartDisCharge({
					pileNo: this.pileNo,
					gunNo: this.gunNo,
					carNum: this.carNum
				}).then(res => {
					const {
						code,
						data,
						msg
					} = res
					if (code === 0) {
						this.busId = data.busId
						times = setInterval(() => {
							this.chkCharge(data.busId, data.pileNo, data.gunNo);
						}, 3000);
					} else {
						clearInterval(waitingTimes);
						clearInterval(times);

						that.waitingDisplay = true
						that.$refs.showBulletFrame.open()
						that.failureReason = msg
					}
				})
			},

			//充电鉴权
			authentication: function() {
				var that = this;
				let setIntervalFn = function(res) {
					times = setInterval(function() {
						console.log('----轮询chkCharge,waitingTime：----', that.waitingTime);
						that.chkCharge(res.data.busId, res.data.gunNo, res.data.pileNo);
					}, 3000);
				};
				// #ifdef MP-ALIPAY
				this.parameter.orderNumber = this.parameter.outTradeNo
				// #endif
				if (this.parameter.disposablePayMode) {
					https_1.disposableStartCharge(this.parameter).then(function(res) {
						if (res.code == 0) {
							(that.busId = res.data.busId), (that.gunNo = res.data.gunNo), (that.pileNo = res
								.data.pileNo);
							setIntervalFn(res);
						} else {
							clearInterval(waitingTimes);
							clearInterval(times); //this.out()

							// 弹出失败提示框
							that.waitingDisplay = true;
							that.$refs.showBulletFrame.open();
							that.failureReason = res.msg;
						}
					});
				} else if (this.parameter.isZhiFuFen) {
					// 支付分支付
					https_1.disposableStartCharge(this.parameter).then(function(res) {
						// 接口请求成功，并且 传入的 busId 与 接口返回的 busId 相等才检测充电，防止 that.parameter.orderNumber 为空时也创建订单
						if (res.code == 0 && res.data && res.data.busId == that.parameter.orderNumber) {
							(that.busId = res.data.busId), (that.gunNo = res.data.gunNo), (that.pileNo = res
								.data.pileNo);
							setIntervalFn(res);
						} else {
							clearInterval(waitingTimes);
							clearInterval(times); //this.out()

							// 弹出失败提示框
							that.waitingDisplay = true;
							that.$refs.showBulletFrame.open();
							that.failureReason = res.msg;
							const errMsg = that.isv2g ? `支付分取消订单：放电接口disposableStartCharge code：${res.code}` :
								`支付分取消订单：充电接口disposableStartCharge code：${res.code}`
							that.zhifufenCancelOrder(errMsg);
						}
					});
				} else {
					https_1.startCharge({
						...this.parameter,
						btCheckBalance: this.batteryCheckBalance
					}).then(function(res) {
						if (res.code == 0) {
							(that.busId = res.data.busId), (that.gunNo = res.data.gunNo), (that.pileNo = res
								.data.pileNo);
							times = setInterval(function() {
								that.chkCharge(res.data.busId, res.data.pileNo, res.data.gunNo);
							}, 3000);
						} else {
							clearInterval(waitingTimes);
							clearInterval(times); //this.out()

							// 弹出失败提示框
							that.waitingDisplay = true;
							that.$refs.showBulletFrame.open();
							that.failureReason = res.msg;

							// uni.showModal({
							//     title: '信息提示',
							//     content: res.msg,
							//     showCancel: false,
							//     success: function (res) {
							//         if (!res.cancel) {
							//             uni.navigateBack();
							//         }
							//     }
							// });
						} // else{
						//   wx.navigateTo({
						//     url: `/homeSub/pages/terminal/gunDetail/gunDetail?pileNo=${this.data.parameter.pileNo}&gunNo=${this.data.parameter.gunNo}`
						//  })
						// }
					});
				}
			},

			//双枪并充 - 充电鉴权
			authentication1: function () {
				var that = this;
				let setIntervalFn = function(res){
					times = setInterval(function () {
						that.chkCharge(res.data.busId, res.data.gunNo, res.data.pileNo);
					}, 3000);
				}

				// #ifdef MP-ALIPAY
				this.parameter.orderNumber = this.parameter.outTradeNo
				// #endif

				if(this.parameter.disposablePayMode){
					// 即充即退
					// 第一把枪
					https_1.disposableStartCharge(this.parameter).then(function (res) {
						if (res.code == 0) {
							that.busId=res.data.busId
							that.gunNo=res.data.gunNo
							that.pileNo=res.data.pileNo
							uni.removeStorageSync('thirdCode')
							
							// 第二把枪
							let busShowNo = res.data.busShowNo
							https_1.disposableStartCharge({
								...that.parameter,
								gunNo:that.parameter.gunNo1,
								busShowNo
							}).then(res=>{
								if (res.code == 0) {
									that.busId=res.data.busId
									that.gunNo=res.data.gunNo
									that.pileNo=res.data.pileNo
									uni.removeStorageSync('thirdCode')
									setIntervalFn(res)
								}else{
									clearInterval(waitingTimes);
									clearInterval(times); //this.out()
															
									// 弹出失败提示框
									that.waitingDisplay=true
									that.$refs.showBulletFrame.open()
									that.failureReason = res.msg
								}
							})
						} else {
								clearInterval(waitingTimes);
								clearInterval(times); //this.out()
		
								// 弹出失败提示框
								that.waitingDisplay=true
								that.$refs.showBulletFrame.open()
								that.failureReason = res.msg
						}
						});
				} else if (this.parameter.isZhiFuFen) {
					// 支付分支付
					// 第一把枪
					https_1.disposableStartCharge(this.parameter).then(function (res) {
						// 接口请求成功，并且 传入的 busId 与 接口返回的 busId 相等才检测充电，防止 that.parameter.orderNumber 为空时也创建订单
						if (res.code == 0 && res.data && res.data.busId == that.parameter.orderNumber) {
							that.busId=res.data.busId
							that.gunNo=res.data.gunNo
							that.pileNo=res.data.pileNo
							uni.removeStorageSync('thirdCode')

							// 第二把枪
							let busShowNo = res.data.busShowNo
							https_1.disposableStartCharge({
								...that.parameter,
								gunNo:that.parameter.gunNo1,
								busShowNo
							}).then(res=>{
								if (res.code == 0) {
									that.busId=res.data.busId
									that.gunNo=res.data.gunNo
									that.pileNo=res.data.pileNo
									uni.removeStorageSync('thirdCode')
									setIntervalFn(res)
								}else{
									clearInterval(waitingTimes);
									clearInterval(times); //this.out()
															
									// 弹出失败提示框
									that.waitingDisplay=true
									that.$refs.showBulletFrame.open()
									that.failureReason = res.msg

									const errMsg = that.isv2g ? `双枪2-支付分取消订单：放电接口disposableStartCharge code：${res.code}` :
								`双枪2-支付分取消订单：充电接口disposableStartCharge code：${res.code}`
									that.zhifufenCancelOrder(errMsg);
								}
							})
						} else {
							clearInterval(waitingTimes);
							clearInterval(times); //this.out()
		
							// 弹出失败提示框
							that.waitingDisplay=true
							that.$refs.showBulletFrame.open()
							that.failureReason = res.msg
							const errMsg = that.isv2g ? `双枪1-支付分取消订单：放电接口disposableStartCharge code：${res.code}` :
								`双枪1-支付分取消订单：充电接口disposableStartCharge code：${res.code}`
							that.zhifufenCancelOrder(errMsg);
						}
					});
				} else {
					// 余额
					https_1.startCharge({
						...this.parameter,
						btCheckBalance: this.batteryCheckBalance
					}).then(function(res) {
						if (res.code == 0) {
							that.busId = res.data.busId
							that.gunNo = res.data.gunNo
							that.pileNo = res.data.pileNo
							uni.removeStorageSync('thirdCode')

							// 第二把枪
							let busShowNo = res.data.busShowNo
							https_1.startCharge({
								...that.parameter,
								btCheckBalance: that.batteryCheckBalance,
								gunNo:that.parameter.gunNo1,
                busShowNo
							}).then(function(res) {
								if (res.code == 0) {
									that.busId = res.data.busId
									that.gunNo = res.data.gunNo
									that.pileNo = res.data.pileNo
									uni.removeStorageSync('thirdCode')
									setIntervalFn(res)
								} else {
									clearInterval(waitingTimes);
									clearInterval(times); //this.out()

									// 弹出失败提示框
									that.waitingDisplay = true;
									that.$refs.showBulletFrame.open();
									that.failureReason = res.msg;
								}
							});
						} else {
							clearInterval(waitingTimes);
							clearInterval(times); //this.out()

							// 弹出失败提示框
							that.waitingDisplay = true;
							that.$refs.showBulletFrame.open();
							that.failureReason = res.msg;
						}
					});
				}
			},

			// 重新启动
			unFrozenAccount: function() {
				var that = this;
				let busId = this.busId;

				if (busId == 'undefined' || busId == undefined) {
					busId = null;
				}
				https_1
					.unFrozenAccount({
						busId
					})
					.then(function(res) {
						if (res.code == 0) {
							(that.busId = res.data.busId), (that.gunNo = res.data.gunNo), (that.pileNo = res.data
								.pileNo);
							// times = setInterval(function () {
							//     that.chkCharge(res.data.busId, res.data.gunNo, res.data.pileNo);
							// }, 3000);
						} else {
							clearInterval(waitingTimes);
							clearInterval(times); //this.out()

							// 弹出失败提示框
							// that.waitingDisplay=true
							// that.failureReason = res.msg

							// uni.showModal({
							//     title: '信息提示',
							//     content: res.msg,
							//     showCancel: false,
							//     success: function (res) {
							//         if (!res.cancel) {
							//             uni.navigateBack();
							//         }
							//     }
							// });
						}
					});
			},

			// 充电启动倒数
			goCharge: function() {
				var that = this;

				waitingTimes = setInterval(function() {
					if (that.waitingTime <= 1) {
						that.failureReason = '启动超时';
						clearInterval(waitingTimes);
						clearInterval(times); //this.out()

						that.waitingDisplay = false;
						that.$refs.showBulletFrame.open();
						that.unFrozenAccount();
					}

					that.waitingTime = --that.waitingTime;
				}, 1000);
			},

			// 获取动图svga 开启动画

			// 获取动图svga
			async getMove() {
				this.$refs.myCanvas.render(async (parser, player) => {
					//#ifdef APP-PLUS || MP-WEIXIN || MP-ALIPAY
					var videoItem = '';
					if (newapp.globalData.sellerNo == 'hyc') {
						videoItem = await parser.load(
							`${newapp.globalData.imgUrl}/h5/cartoon/greenBall3.svga`);
					} else {
						videoItem = await parser.load(
							'https://oos-cn.ctyunapi.cn/front-end/static/cartoon/greenBall3.svga');
					}
					//#endif
					//#ifdef H5
					var videoItem = await parser.load(
						`${newapp.globalData.imgUrl}/h5/cartoon/greenBall3.svga`);
					//#endif
					await player.setVideoItem(videoItem);
					uni.hideLoading();
					// 设置当前动画的循环次数，0代表无限循环 默认 0
					player.loops = 0;
					// 开始播放动画，reverse = true 时则反向播放。
					player.startAnimation();
				});
			},

			refreshPage() {
				let that = this;
				uni.hideLoading();
				that.zhifufenCancelOrder('启动动画加载失败');
				uni.showModal({
					title: '提示',
					content: '启动动画加载失败，请重新加载。',
					showCancel: false,
					confirmText: '返回',
					success(res) {
						if (res.confirm) {
							let parameter = JSON.stringify(that.parameter);
							// uni.redirectTo({
							// 	url: `/homeSub/pages/startCharging/startCharging?parameter=${parameter}`
							// })
							uni.navigateBack();
						}
					}
				});
			},
			// 静止动画
			// 静止动画
			enter: function() {
				this.$refs.svga.render(async (parser, player2) => {
					console.log(videoItem2, 'dosajfkdlsjafkld');
					await player2.setVideoItem(videoItem2);

					// 设置当前动画的循环次数，0代表无限循环 默认 0
					player2.loops = 999;
					// 开始播放动画，reverse = true 时则反向播放。
					player2.startAnimation();
				});
			},
			toPowerPage() {
				// #V2G功能
				if (this.isV2GOption && this.isv2g) {
					uni.reLaunch({
						url: `/echartsPages/pages/dischargePower/dischargePower?busId=${this.busId}&pileNo=${this.pileNo}&gunNo=${this.gunNo}&backType=2`
					})
					return
				}

				// #ifdef MP-WEIXIN  || MP-ALIPAY
				//解决内存不足跳转
				uni.reLaunch({
					url: `/echartsPages/pages/power/power?busId=${this.busId}&pileNo=${this.pileNo}&gunNo=${this.gunNo}&backType=2` +
						'&stationId=' +
						this.stationId
				});
				// #endif

				// #ifndef MP-WEIXIN   || MP-ALIPAY
				uni.redirectTo({
					url: `/echartsPages/pages/power/power?busId=${this.busId}&pileNo=${this.pileNo}&gunNo=${this.gunNo}&backType=2` +
						'&stationId=' +
						this.stationId
				});
				// #endif
			},
			// 退出动画
			out: function() {
				this.toPowerPage();
				return;
				this.$refs.svga.render(async (parser, player) => {
					try {
						await player.setVideoItem(videoItem3);
						// 设置当前动画的循环次数，0代表无限循环 默认 0
						player.loops = 1;
						// 开始播放动画，reverse = true 时则反向播放。
						player.startAnimation();
						//player.onPercentage(this.enter)
						// 监听动画完成
						let status = false;

						player.onFinished(() => {
							if (status) return;
							status = true;
							player.stopAnimation(true);
							player.clearDynamicObjects && player.clearDynamicObjects();
							console.log('动画结束333');
							this.toPowerPage();
						});

						// 添加定时器防止onFinished回调没走到
						setTimeout(() => {
							if (status) return;
							status = true;
							this.toPowerPage();
						}, 2000);
					} catch (e) {
						console.log('执行动画报错，强行跳转');
						this.toPowerPage();
					}
				});
			},

			// 跳转到充电详情
			retreat: function(a) {
				if (a === 1) {
					// uni.redirectTo({
					//     url: '/echartsPages/pages/power/power?busId=' + this.busId + '&pileNo=' + this.pileNo + '&gunNo=' + this.gunNo + '&backType=2'
					// });
					//解决内存不足跳转
					// #ifdef MP-WEIXIN || MP-ALIPAY
					uni.reLaunch({
						url: '/echartsPages/pages/power/power?busId=' +
							this.busId +
							'&pileNo=' +
							this.pileNo +
							'&gunNo=' +
							this.gunNo +
							'&backType=2' +
							'&stationId=' +
							this.stationId
					});
					// #endif

					// #ifndef MP-WEIXIN || MP-ALIPAY
					uni.redirectTo({
						url: '/echartsPages/pages/power/power?busId=' +
							this.busId +
							'&pileNo=' +
							this.pileNo +
							'&gunNo=' +
							this.gunNo +
							'&backType=2' +
							'&stationId=' +
							this.stationId
					});
					// #endif
				}
			},

			// 重新启动  返回上一页
			again: function() {
				this.unFrozenAccount();
				console.log('进入');
				uni.navigateBack();
				this.$refs.showBulletFrame.close();
				// this.waitingTime=120,
				//     this.waitingDisplay=true
				// this.getMove();
				// this.authentication()
			},

			/**
			 * 轮询检测充电
			 */
			chkCharge: function(busId, pileNo, gunNo) {
				// 支付分支付 && 上次没有执行完成，就不在重复执行
				if (this.parameter.isZhiFuFen && this.isChkChargeLoading) return;

				var that = this;
				var data = {
					busId: busId,
					pileNo: pileNo,
					gunNo: gunNo
				};

				this.isChkChargeLoading = true; // 支付分支付，避免重复执行

				https_1
					.queryIsChargeByBusId(data)
					.then(function(res) {
						if (res.code == 0) {
							console.log('轮询成功11');
							//获取所有充电订单
							// $this.getbillNo(busId,gunNo,pileNo)
							clearInterval(waitingTimes);
							clearInterval(times);
							that.out();
						} else if (res.code == 3) {
							if (that.waitingTime < 1) {
								that.failureReason = '启动超时';
								clearInterval(waitingTimes);
								clearInterval(times);
								that.waitingDisplay = false;
								that.$refs.showBulletFrame.open();
								const errMsg = that.isv2g ? '支付分取消订单：放电接口queryIsChargeByBusId code：3' :
									'支付分取消订单：充电接口queryIsChargeByBusId code：3'
								that.zhifufenCancelOrder(errMsg);
							}
						} else if (res.code == 500) {
							that.failureReason = that.isv2g ? '启动放电报错' : '启动充电报错';
							clearInterval(waitingTimes);
							clearInterval(times);
							that.waitingDisplay = false;
							that.$refs.showBulletFrame.open();
							const errMsg = that.isv2g ? '支付分取消订单：放电接口queryIsChargeByBusId code：500' :
								'支付分取消订单：充电接口queryIsChargeByBusId code：500'
							that.zhifufenCancelOrder(errMsg);
						}
					})
					.finally(() => {
						that.isChkChargeLoading = false; // 执行完成
					});
			},

			/**
			 * 弹框
			 */
			wxalert: function(str) {
				uni.showModal({
					title: '消息提示',
					content: str,
					showCancel: false
				});
			},
			// 微信支付分取消订单
			zhifufenCancelOrder(str) {
				console.log(str);
				let that = this;
				if (that.parameter.isZhiFuFen) {
					cancelOrder({
						sellerId: getApp().globalData.sellerId,
						busId: that.parameter.orderNumber,
						cancelReason: str
					}).then((res) => {
						console.log(res, '支付分取消订单');
						let tips = res.code == 0 ? '支付分取消订单成功' : `支付分取消失败请联系客服手动取消busId:${busId}`;
						uni.showModal({
							title: '提示',
							content: tips,
							success: function(res) {
								// uni.navigateBack()
							}
						});
					});
				}
			},

			// 停止充电
			clickStop() {
				var $this = this;
				uni.showModal({
					title: '消息提示',
					content: this.isv2g ? '当前检测未启动成功您确认停止放电吗？' : '当前检测未启动成功您确认停止充电吗？',
					confirmText: '确认',
					cancelText: '取消',
					success: function(res) {
						if (res.confirm) {
							// 停止充电
							clearInterval(times);
							stopAndCloseCharge({
								busId: $this.busId
							}).then((res) => {
								if (res.code == 0 || res.code == 3) {
									uni.navigateBack();
								}
							});
						}
					}
				});
			},

			// 停车费
			clickParkingRate: function() {
				this.isParkingRate = !this.isParkingRate;
			}
		}
	};
</script>
<style lang="less">
	/* homeSub/pages/startCharging/startCharging.wxss */
	@import '../../../commin/commin.less';

	// 831样式
	@import '@/echartsPages/pages/power/power-discount.less';

	.powerCon {
		padding-bottom: 230rpx;
		padding-top: 12rpx;
		background-color: #16181a;
		height: 100%;
		font-family: PingFang SC;
		overflow: hidden;
		max-width: 100vw;
	}

	.advCon {
		color: #b1bfce;
		background-color: rgba(255, 255, 255, 0.1);
		font-size: 26rpx;
		padding: 22rpx 40rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;

		.img {
			width: 35rpx;
			height: 27rpx;
			vertical-align: middle;
			margin-right: 15rpx;
		}
	}

	.vehicleInfoCon {
		margin-top: 39rpx;
		padding: 0 40rpx;
		display: flex;
		justify-content: space-between;
	}

	.vehCon {
		width: 192rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 42rpx;
			height: 42rpx;
			display: inline-block;
			vertical-align: text-bottom;
			margin-top: 22rpx;
		}

		.vehVal {
			color: #fff;
			font-size: 34rpx;
			margin-left: 6rpx;
			font-weight: bold;
			margin-bottom: 7rpx;
		}

		.brandVal {
			font-size: 28rpx;
			font-weight: 400;
			color: #cfe7ff;
			margin-left: 6rpx;
			margin-bottom: 10rpx;
		}

		.vehTitle {
			font-size: 24rpx;
			font-weight: 400;
			color: #b1bfce;
			margin-left: 6rpx;
		}
	}

	.infoContainer {
		padding: 0 40rpx;
	}

	.chargeInfoCon {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 100%;
		color: #fff;

		.amount {
			width: 340rpx;
			height: 180rpx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.leftLocation {
			position: absolute;
			top: 35rpx;
			left: 142rpx;

			.amountVal {
				font-size: 36rpx;
				font-family: DIN;
				font-weight: bold;
				color: #00ffff;
			}

			.amountTitle {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #a6d2ff;
				margin-top: 10rpx;
			}
		}

		.rightLocation {
			position: absolute;
			top: 35rpx;
			left: 54rpx;

			.amountVal {
				font-size: 36rpx;
				font-family: DIN;
				font-weight: bold;
				color: #00ffff;
			}

			.amountTitle {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #a6d2ff;
				text-align: center;
				margin-top: 10rpx;
			}
		}
	}

	.svg_icon {
		display: inline-flex;
		width: 1em;
		height: 1em;
		overflow: hidden;
	}

	.svg_icon-inner {
		width: 1em;
		height: 1em;
		transform: translateY(-1em);
		filter: drop-shadow(0 1em 0 currentColor);
	}

	.active {
		// .kuangao(94%, 210rpx);
		// .margins(32rpx; auto; 32rpx; auto);

		.activ-in {
			.gao(210rpx);

			.swiperitem {
				.gao(210rpx);
				.kuan(@percent);
				.borderradius(16rpx, 16rpx, 16rpx, 16rpx);
			}
		}
	}

	.addressCon {
		color: #a6d2ff;
		font-size: 24rpx;
		padding: 66rpx 0rpx 99rpx 0rpx;
		font-weight: 500;

		.img {
			width: 28rpx;
			height: 32rpx;
			vertical-align: middle;
			margin-right: 17rpx;
		}
	}

	.parkingCon {
		width: 750rpx;
		height: 100vh;
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.parking {
		width: 702rpx;
		background: #ffffff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		position: fixed;
		bottom: 26rpx;
		left: 24rpx;
		padding: 30rpx 30rpx 48rpx 30rpx;
		box-sizing: border-box;
		z-index: 4;

		.parkingImg {
			text-align: center;

			// display: flex;
			// justify-content: space-between;
			// align-items: center;
			.img {
				position: absolute;
				right: 23rpx;
			}
		}

		.parkingTitle {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #303133;
		}

		image {
			width: 23rpx;
			height: 23rpx;
		}
	}

	.DesCon {
		margin-top: 29rpx;
	}

	.parkingNotice {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #909399;
		line-height: 40rpx;
	}

	.parkingDesCon {
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		font-weight: 500;
		color: #606266;
		line-height: 48rpx;
	}

	.parkingDesCon2 {
		line-height: 65rpx;

		.parkingTitle {
			display: inline-block;
			font-size: 28rpx;
			color: #606266;
			margin-left: 24rpx;
		}

		.Title {
			display: inline-block;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #606266;
			margin-left: 24rpx;
		}

		.parkingVal {
			display: inline-block;
			font-size: 28rpx;
			font-weight: bold;
			color: #303133;
			margin-left: 24rpx;
		}

		.parkingVal2 {
			display: inline-block;
			font-size: 28rpx;
			font-weight: 500;
			color: #303133;
			margin-left: 24rpx;
		}
	}

	.parkingRate {
		text-align: center;
		color: #a5a6a6;
		font-size: 26rpx;

		.parkingRateText {
			text-decoration: underline;
		}

		.img {
			width: 25rpx;
			height: 25rpx;
			vertical-align: middle;
			margin-right: 9rpx;
		}
	}

	.stopcharge {
		width: 100%;
		position: fixed;
		bottom: 0;
		text-align: center;
		justify-content: space-between;
		padding: 32rpx 31rpx 32rpx 31rpx;
		background-color: #16181a;
		z-index: 1;
		box-sizing: border-box;

		button {
			width: 680rpx;
			height: 88rpx;
			// background: linear-gradient(105deg, #6DB12E, #6DB12E);
			background: var(--btnColor);
			border-radius: 44px;
			line-height: 88rpx;
			font-size: 32rpx;
			border-color: var(--btnColor);
		}
	}

	.loading-warp {
		// text-align: center;
		position: relative;
		height: 375rpx;
		// image {
		//     position: absolute;
		//     width: 100%;
		//     height: 100%;
		//     margin: 0;
		//     left: 0;
		//     right: 0;
		//     bottom: 0;
		// }
	}

	.infoTopCon {
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		text-align: center;
		margin-top: 26rpx;

		.infoSite {
			font-size: 32rpx;
			font-weight: bold;
			position: relative;

			.infoImg {
				display: inline-block;
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				right: 32rpx;
				z-index: 98;
			}
		}

		.infoGun {
			margin-top: 23rpx;
			font-weight: 500;
			color: #ffffff;
			opacity: 0.8;
			font-size: 28rpx;
		}
	}

	.infoPlate {
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #ffffff;
	}

	.infoEstimate {
		text-align: center;
		font-size: 30rpx;
		font-weight: 500;
		color: #ffffff;
		opacity: 0.8;
		margin-top: 24rpx;

		.infoEstimateText {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #ffffff;
			opacity: 0.6;
			margin-right: 20rpx;
		}
	}

	.electricityPriceCon {
		margin: 32rpx 24rpx;
		position: relative;

		// background: linear-gradient(-15deg, rgba(35,36,38,0), rgba(55,59,64,0.99));
		// border: 2rpx solid #3E444A;
		// border-radius: 16rpx;
		.price {
			display: inline-block;
			padding: 25rpx 33rpx;
			text-align: center;
			font-size: 26rpx;
			font-weight: 500;
			color: #94979c;
			display: flex;
			justify-content: space-between;

			.priceText {
				vertical-align: middle;

				.priceCurrent {
					color: #fff;
				}
			}

			.infoImg {
				display: inline-block;
				width: 32rpx;
				height: 32rpx;
				margin-left: 7rpx;
				vertical-align: middle;
			}
		}
	}

	.infoCon {
		.infoLi {
			width: 100px;
			text-align: center;
		}

		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		margin-bottom: 40rpx;

		.infoTitle {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #ffffff;
			opacity: 0.6;
		}

		.infoVal {
			font-size: 48rpx;
			font-family: DINPro;
			font-weight: 500;
			color: #ffffff;
			margin-bottom: 5rpx;
		}
	}

	.columnCanvas {
		height: 180px;
		marign-top: 20rpx;
		margin-bottom: 30rpx;
	}

	.division {
		border-top: 1rpx solid #3d3f41;
		margin: 48rpx 42rpx;
	}

	.echartTitleCon {
		color: #ffffff;
		font-size: 26rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 25rpx 33rpx;

		.title {
			display: inline-block;
			opacity: 0.6;
		}

		.mark1 {
			display: inline-block;
			width: 16rpx;
			height: 16rpx;
			background: @blue;
			border-radius: 50%;
			margin: 0 15rpx;
		}

		.mark2 {
			display: inline-block;
			width: 16rpx;
			height: 16rpx;
			background: #fc724c;
			border-radius: 50%;
			margin: 0 15rpx;
		}
	}

	.identCode {
		text-align: center;
		font-size: 26rpx;
		font-weight: 500;
		margin-top: 31rpx;

		.identCodeTitle {
			color: #ffffff;
			opacity: 0.5;
		}

		.val {
			color: #58b830;
		}
	}

	.box-info {
		width: 680rpx;
		height: 660rpx;
		padding: 0 32rpx 40rpx 32rpx;
		margin: 0 auto;
		overflow: auto;

		.title {
			font-size: 30rpx;
			font-weight: bold;
			color: #303133;
			position: absolute;
			padding: 40rpx 0rpx 40rpx 15rpx;
			background-color: #fff;
			width: 90%;
			z-index: 98;

			&:after {
				content: '';
				display: block;
				position: absolute;
				top: 46rpx;
				left: 0rpx;
				width: 6rpx;
				height: 30rpx;
				background-color: #6db12e;
				z-index: 2;
			}
		}

		&>.t1 {
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #303133;
			margin-bottom: 24rpx;
			margin-top: 120rpx;
		}

		.list {
			.item {
				width: 620rpx;
				padding: 35rpx 32rpx;
				position: relative;
				display: flex;
				justify-content: space-between;
				background: #f5f7fa;
				margin-bottom: 16rpx;
				align-items: center;

				&:last-of-type {
					margin-bottom: 0;
				}

				.time {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #303133;
				}

				&>.t1 {
					width: 80rpx;
					height: 38rpx;
					display: none;
					background: #fc724c;
					border-radius: 17rpx 17rpx 0px 17rpx;
					color: #f5f7fa;
					text-align: center;
					line-height: 38rpx;
					font-size: 20rpx;
					position: absolute;
					top: 40rpx;
					left: 220rpx;
					z-index: 1;
				}

				&>.t2 {
					width: 110rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					display: none;
					background: #fc724c;
					border-radius: 0px 20rpx 20rpx 0px;
					color: #fff;
					font-size: 26rpx;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
				}

				.t2.active,
				.t1.active {
					display: block;
				}

				.right-item {

					.type1,
					.type2 {
						font-size: 26rpx;
						font-weight: 500;
						color: #606266;

						.l1 {
							display: flex;
							justify-content: space-between;
							align-items: center;

							text {
								margin-left: 20rpx;
							}
						}

						.t2 {
							font-size: 32rpx;
							font-weight: bold;
							color: @blue;
						}

						.delete {
							font-size: 26rpx;
							font-weight: 400;
							text-decoration: line-through;
							color: #909399;
							display: flex;
							justify-content: space-between;
							margin-top: 30rpx;

							text {
								margin-left: 20rpx;
							}
						}

						&>text {
							margin-left: 20rpx;
						}
					}

					.type2 {
						.t1 {
							font-size: 32rpx;
							font-weight: bold;
							color: @blue;
						}
					}
				}
			}

			.item.active {
				background: rgba(252, 114, 76, 0.08);
			}
		}
	}

	.svgaRightCon {
		position: absolute;
		width: 110rpx;
		height: 100%;
		right: 0rpx;
		top: 0rpx;
	}

	.svgaLeftCon {
		position: absolute;
		width: 110rpx;
		height: 100%;
		left: 0rpx;
		top: 0rpx;
	}

	.sosCon {
		font-size: 72rpx;
		font-weight: bold;
		color: #00ffae;
		text-align: center;
		position: absolute;
		width: 100%;
		text-align: center;
		top: 148rpx;
		z-index: 98;

		// z-index: 99;
		.sosScale {
			font-size: 30rpx;
		}
	}

	.SVGACon {

		// position: relative;
		// height: 100%;
		// width: 100%;
		canvas {
			z-index: 1;
		}
	}

	.price_popup {
		width: 702rpx !important;
		height: 691rpx;
		margin: 0 24rpx 26rpx 24rpx;
		background: linear-gradient(0deg, #ffffff, #f4f6f8);
		border: 2rpx solid #ffffff;
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
		border-radius: 16rpx;
	}

	/*站点优惠价格样式*/
	.yhimg_box {
		width: 40rpx;
		height: 40rpx;
		// margin-right: 8rpx;
		position: relative;

		.discount_img {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
		}

		.vip_text {
			position: absolute;
			top: 40%;
			left: 55%;
			transform: translate(-50%, -50%);
			font-size: 16rpx;
			font-family: DIN-BlackItalic;
			font-weight: 600;
			// font-style:italic;
			color: #a65424;
		}
	}

	.BulletFrameCon {
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		font-family: PingFang SC;
		overflow: hidden;

		.bulletTitle {
			padding: 45rpx 0rpx 40rpx 0rpx;
			text-align: center;
			font-size: 34rpx;
			font-weight: bold;
			color: #303133;

			.img {
				position: absolute;
				right: 23rpx;
				width: 25rpx;
				height: 25rpx;
				vertical-align: middle;
				margin-right: 9rpx;
			}
		}

		.bulletVal {
			font-size: 28rpx;
			font-weight: 500;
			color: #909399;
			line-height: 65rpx;
			padding: 0 35rpx;
			text-align: center;
		}

		.bulletButton {
			margin-top: 86rpx;
			text-align: center;
			border-top: 1rpx solid #DCDFE6;
			padding: 40rpx 0;
			font-weight: bold;
			color: var(--textColor);
			font-size: 30rpx;
		}
	}
</style>